<template>
	<view class="dynamics">
		<!-- <view>欢迎来到动态</view> -->
		<view class="titi">
			<image class="im2" :src="srcUrl1()" style="width: 120rpx; height: 120rpx;"></image>
			<image class="name1" :src="srcUrl2()" style="width: 300rpx; height: 120rpx;"></image>
		</view>
		<view class="tab2">
			<navigator url="video">
			</navigator>
			<video class="vid" auto-pause-if-navigate="true" autoplay="true" :src="srcMv()">
			</video>
		</view>

		<view class="show">
			<!-- 表白墙 -->
			<view class="notice" v-for="item in confessionNum" :key="index">
				<view class="top">
					<view class="person">
						<view class="tou">
							<image v-if="item.publisher.wxHeadImgUrl != null" class="image-bg" :src="item.publisher.wxHeadImgUrl" style="width: 80rpx;height: 80rpx;border-radius: 50%;"></image>
							<image v-if="item.publisher.wxHeadImgUrl == null" class="image-bg" src="/static/images/biaobai.jpg" style="width: 80rpx;height: 80rpx;border-radius: 50%;"></image>
						</view>
						<view class="bn">
							<text class="name">{{item.publisher.wxNickName}}</text>
						</view>
						<view class="tw">
							<view class="time">{{item.createTime | formatDate}}</view>
						</view>
					</view>
					<view class="zy">
						<text>{{item.content}}</text>
					</view>
				</view>
				<view class="qt">
					<view class="dz" @click="dianzan" :data-praiseid="item.id" :data-praise="item.remark" data-tit="1">
						<image v-if="item.sort == true" class="wave" src="../../static/images/praise1.png"></image>
						<image v-if="item.sort == false" class="wave" src="../../static/images/praise.png"></image>
						<view class="wave1">{{item.praise}}</view>
					</view>
					<view class="zf">
						<image class="wave" src="../../static/images/transmit1.png"></image>
					</view>
				</view>
				<view class="br1"></view>
			</view>
			<view class="br"></view>

			<!-- 动态 -->
			<view class="photo" v-for="(item,index) in content" :key="index">
				<view class="top1">
					<view class="person">
						<view class="tou">
							<image v-if="item.publisher.wxHeadImgUrl != null" class="image-bg" :src="item.publisher.wxHeadImgUrl" style="width: 80rpx;height: 80rpx;border-radius: 50%;"></image>
							<image v-if="item.publisher.wxHeadImgUrl == null" class="image-bg" src="/static/images/xiaohui.png" style="width: 80rpx;height: 80rpx;border-radius: 50%;"></image>
						</view>
						<view class="bn">
							<text class="name">{{item.publisher.wxNickName}}</text>
						</view>
						<view class="tw">
							<view class="time">{{item.createTime | formatDate}}</view>
						</view>
					</view>
					<view class="zy">
						<text>{{item.content}}</text>
					</view>
					<view class="tab">
						<view class="imgs" v-for="iamg in item.issueImags" :key="index1">
							<image @click="imgYu" :data-img="iamg" :data-list="iamg" class="img" :src="iamg"></image>
						</view>
					</view>
				</view>
				<view class="br3"></view>
				<view class="qt">
					<view class="dz" @click="dianzan" :data-praiseid="item.id" :data-praise="item.remark" data-tit="0">
						<image v-if="item.sort == true" class="wave" src="../../static/images/praise1.png"></image>
						<image v-if="item.sort == false" class="wave" src="../../static/images/praise.png"></image>
						<view class="wave1">{{item.praise}}</view>
					</view>
					<view class="zf">
						<image class="wave" src="../../static/images/transmit1.png"></image>
					</view>
				</view>
				<view class="br1"></view>
			</view>
			<view class="br1"></view>
		</view>
	</view>
</template>

<script>
	let app = getApp();
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				title: '跳转成功',
				content: [], //动态
				confessionNum: [], //表白墙
				praises: [],
				size: 5,
				page: 0,
				current: 0,
				dycurrent: 0
			}
		},
		computed: {
			...mapState(['nickName', 'avatarUrl', 'openid', 'gender','userId','userName','token'])
		},
		async onLoad(e) {
			var that = this;
			console.log("app.globalData：", app.globalData);
			this.findDy(that.page);
			this.findConfession(that.page);
			//获取点赞数
		},
		//时间戳的处理
		filters: {
			formatDate: function(value) {
				var date = new Date();
				date.setTime(value);
				var month = date.getMonth() + 1;
				var hours = date.getHours();
				if (hours < 10)
					hours = "0" + hours;
				var minutes = date.getMinutes();
				if (minutes < 10)
					minutes = "0" + minutes;
				var time = date.getFullYear() + "-" + month + "-" + date.getDate() +
					" " + hours + ":" + minutes;
				return time;
			}		
		},		
		onReachBottom: function() { //当划到最底部的时候触发事件
			console.log("我是最底部了");
			let that = this;
			that.page += 1;			
			that.findConfession(that.page);
			that.findDy(that.page);
		},
		//下拉刷新显示提示语
		onPullDownRefresh: function() {
			this.setData({
				showView: true, //这个是我判断提醒语的显示，我在page里设置变量是true
			})
			setTimeout(() => {
				this.setData({
					showView: false,
				})
				wx.hideNavigationBarLoading() //完成停止加载
				wx.stopPullDownRefresh() //停止下拉刷新
			}, 1000)
		},
		methods: {
			/** 图片点击显示图片 */
			imgYu(event) {
				console.log(event);
				var src = event.currentTarget.dataset.img; //获取data-src
				var imgList = [event.currentTarget.dataset.list]; //获取data-list
				//图片预览
				wx.previewImage({
					current: src, // 当前显示图片的http链接
					urls: imgList // 需要预览的图片http链接列表
				})
			},
			srcUrl1:function(){
				return app.globalData.Link+'upload/图片/校徽白色.png';
			},
			srcUrl2:function(){
				return app.globalData.Link+'file/system/贵州民族大学校名-白色.png';
			},
			srcMv:function(){
				return app.globalData.Link+'upload/gzmu_sketch.mp4';
			},
			//点赞
			dianzan(e) {
				var that = this;
				let tit = e.currentTarget.dataset.tit; //1表白墙，0动态
				let praiseId = e.currentTarget.dataset.praiseid; //动态ID
				let dynamicName = e.currentTarget.dataset.praise; //动态对应点赞人
				let userId = that.userId;
				let userName = that.userName;
				//根据当前动态id查询判断是否点赞
				if (dynamicName.length != 0) {
					for (var i = 0; dynamicName.length > i; i++) {
						if (dynamicName[i].userId == userId) {
							uni.showToast({
								title: "您已经点过赞！",
								icon: 'none',
								duration: 2000
							});
							return;
						}
						if (dynamicName[dynamicName.length - 1].userId != userId) {
							that.addPraise(praiseId, userId, userName);
							//局部刷新页面
							if (tit == 0) {
								that.findDy(that.page);
							}
							if (tit == 1) {
								that.findConfession(that.page);
							}
							return;
						}
					}
				} else {
					that.addPraise(praiseId, userId, userName);
					//局部刷新页面
					if (tit == 0) {
						that.findDy(that.page);
					}
					if (tit == 1) {
						that.findConfession(that.page);
					}
					return;
				}

			},
			//添加点赞信息
			addPraise(praiseId, userId, userName) {
				//点赞该条动态
				var param = {
					url: "praise/insertPraise",
					data: {
						praiseId: praiseId,
						userId: userId,
						praiseName: userName
					},
					type: "POST",
					sCallback: function(data) {
						console.log("data:", data)
						if (data == 1) {
							uni.showToast({
								title: '点赞成功',
								type: 'success'
							})
						} else {
							uni.showToast({
								title: '请检查网络重新点赞',
								icon: 'none',
								type: 'warning'
							})
						}

					}
				};
				app.request(param);
			},
			//查询动态
			async findDy(page) {
				var that = this;
				uni.request({
					url: app.globalData.Link + 'api/message/findMessage1',
					data: {
						page: page,
						size: that.size,
						issueType: 0
					},
					method: "get",
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						Authorization: that.token
					},
					success(res) {
						let num = res.data;
						//that.content = res.data;
						if (that.dycurrent > 0)
							that.content.concat = that.content.concat(res.data);
						else
							that.content = res.data;
						console.log("that.content:", that.content);
						if (res.data.length != 0) {
							// let praises = '';
							let i = 0
							for (; num.length > i; i++) {
								// //查询点赞数
								that.huoqu(num[i].id, i, 0, res.data[i].id);
								if (res.data[i].issueImags != "") {
									that.content[i + that.dycurrent].issueImags = JSON.parse(res.data[i].issueImags);
								}
							}
							that.dycurrent += i;
							console.log("内容:", that.content);
						}
					}
				})

			},
			//查询表白墙
			findConfession(page) {
				var that = this;
				uni.request({
					url: app.globalData.Link + 'api/message/findMessage1',
					data: {
						page: page,
						size: that.size,
						issueType: 1
					},
					method: "get",
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						Authorization: that.token
					},
					success(res) {
						let num = res.data;
						if (that.current > 0)
							that.confessionNum = that.confessionNum.concat(res.data);
						else
							that.confessionNum = res.data;
						console.log("that.confessionNum:", that.confessionNum);
						if (res.data.length != 0) {
							var i = 0
							for (; num.length > i; i++) {
								that.huoqu(num[i].id, i, 1, res.data[i].id);
								if (res.data[i].issueImags != "") {
									that.confessionNum[i + that.current].issueImags = JSON.parse(res.data[i].issueImags);
									console.log("findConfession:", that.confessionNum[i + that.current].issueImags);
								}
							}
							that.current += i;
						}
					}
				})
				console.log("that.confessionNum :", that.confessionNum);
			},
			//点赞数
			praiseNum(e) {
				return new Promise((resolve, reject) => {
					var that = this;
					let num = '';
					uni.request({
						url: app.globalData.Link + 'api/praise/selectPraise',
						data: {
							praiseId: e
						},
						method: "get",
						header: {
							'content-type': 'application/x-www-form-urlencoded',
							Authorization: that.token
						},
						success(res) {
							// console.log("获取点赞数:", res.data);
							return resolve(res.data)
						},
						fail(res) {
							console.log("获取点赞数失败！");
							return reject(res.data)
						}
					})
				})
			},
			async huoqu(e, i, k, messageId) {
				var that = this;
				var name = '';
				await that.praiseNum(e).then(res => {
					name = res;
				});
				//动态
				if (k == 0) {
					that.content[i].praise = name;
					//根据留言板id查询对应的点赞人信息
					console.log("messageId：", messageId)
					that.goodMessage(messageId, i, k);
				}
				//表白墙
				else {
					that.confessionNum[i].praise = name;
					that.goodMessage(messageId, i, k);
				}
			},
			//查询点赞人信息
			goodMessage(messageId, i, k) {
				var that = this;
				uni.request({
					url: app.globalData.Link + 'api/praise/selectMessageUser',
					data: {
						messageId: messageId
					},
					method: "get",
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						Authorization: that.token
					},
					success(res) {
						// console.log("获取点赞人信息:", res.data);
						if (k == 0) {
							that.content[i].remark = res.data;
							let praises = that.content[i].remark
							if (praises.length != 0) {
								for (var b = 0; praises.length > b; b++) {
									if (praises[b].userId == that.userId) {
										that.content[i].sort = true;
										return;
									}
									if (praises[praises.length - 1].userId != that.userId) {
										that.content[i].sort = false;
									}
								}
							} else {
								that.content[i].sort = false;
							}
						} else {
							that.confessionNum[i].remark = res.data;
							let praises = that.confessionNum[i].remark
							if (praises.length != 0) {
								for (var b = 0; praises.length > b; b++) {
									if (praises[b].userId == that.userId) {
										that.confessionNum[i].sort = true;
										return;
									}
									if (praises[praises.length - 1].userId != that.userId) {
										that.confessionNum[i].sort = false;
									}
								}
							} else {
								that.confessionNum[i].sort = false;
							}
						}
					},
					fail(res) {
						console.log("获取点赞人失败！");
					}
				})
			}
		}
	}
</script>

<style>
	.dynamics {
		width: 100%;
		height: 100%;
		background-color: #FFFFFF;
		/* margin-top: 10rpx; */

	}

	.titi {
		height: 400rpx;
		background-color: #255BBA;
		display: flex;

	}

	.im2 {
		width: 100%;
		height: 150rpx;
		margin: 20rpx 20rpx;
	}

	.name1 {
		/* margin-left: 20rpx; */
		margin-top: 10rpx;
		text-align: center;
		font-size: 18rpx;
	}

	.tab {
		display: flex;
		margin: 10rpx 10rpx;

	}

	.show {
		line-height: 150rpx;
		/* 设置行高*/
	}

	/* notice/text  start*/
	.notice {
		height: auto;
		/* height: 250rpx; */
		margin-top: 20rpx;
		color: #F1F1F1;
		background-color: #FFFFFF;
	}

	.top {
		background-image: url(../../static/images/notice.jpg);
		height: auto;
		/* height: 200rpx; */
		background-size: 100%;
		/* border-radius: 10rpx; */
		margin-top: 10rpx;
		/* border-bottom: none; */
		line-height: 100rpx;
	}

	.person {
		width: 100%;
		height: 140rpx;
		line-height: 20rpx;
		display: flex;
	}

	.tou {
		/* height: 50%; */
		/* display: block; */
	}

	.image-bg {
		margin-top: 20rpx;
		margin-left: 20rpx;
	}

	.name {
		font-size: 30rpx;
		margin: 20rpx;
		top: 100rpx;
		/* margin-top: 20rpx; */

	}

	.bn {
		width: 50%;
		margin-top: 55rpx;
	}

	.tw {
		width: 40%;
	}

	.time {
		text-align: right;
		font-size: 22rpx;
		margin-top: 50rpx;
		margin-right: 30rpx;
	}

	.zy {
		margin-top: 10rpx;
		line-height: 40rpx;
		margin-left: 20rpx;
		margin-right: 12rpx;
		font-size: 30rpx;
		margin-bottom: 20rpx;
	}

	.qt {
		display: flex;
		/* border: 1rpx solid #FFFFFF; */
		background-color: #FFFFFF;
		/* border-top: none; */
		/* margin-top: 10rpx; */
		height: 80rpx;
	}

	.br {
		background-color: #F1F1F1;
		width: 100%;
		height: 30rpx;
	}

	.br1 {
		background-color: #F1F1F1;
		width: 100%;
		height: 20rpx;
	}

	.br3 {
		background-color: #F1F1F1;
		width: 100%;
		height: 5rpx;
	}

	.wave {
		display: flex;
		z-index: 3;
		right: 0;
		bottom: 0;
		opacity: 0.725;
		height: 40rpx;
		width: 40rpx;
		margin-top: 15rpx;
		/* animation: wave 10s linear infinite;  */
	}

	.wave1 {
		display: flex;
		z-index: 3;
		right: 0;
		bottom: 0;
		opacity: 0.725;
		height: 40rpx;
		width: 40rpx;
		color: #BBBBBB;
		font-size: 30rpx;
		margin-top: -35rpx;
		/* animation: wave 10s linear infinite;  */
	}

	.dz {
		width: 100rpx;
		height: 80rpx;
		margin-left: 520rpx;
		display: flex;
	}

	.pl {
		margin-left: 50rpx;
		display: flex;
	}

	.zf {
		margin-left: 40rpx;
	}

	#t {
		font-size: 35rpx;
		color: #BBBBBB;
		margin-left: 5rpx;
		margin-bottom: 50rpx;
		text-align: center;
	}

	/* notice/text  end*/

	/* photo  start */
	.top1 {
		background-color: #FFFFFF;
		height: auto;
		background-size: 100%;
		border-radius: 10rpx;
		margin-top: 10rpx;
		border-bottom: 10rpx;
		line-height: 100rpx;
	}

	.photo {
		height: auto;
		margin-top: 20rpx;
		color: #333333;
	}

	.imgs {
		display: flex;
		width: 100%;
		margin-top: 10rpx;

	}

	.img {
		width: 230rpx;
		height: 220rpx;
		size: 100%;
		margin-left: 10rpx;
		/* margin-right: 10rpx; */
		margin-bottom: 20rpx;
	}

	/* photo  end*/

	/* video  start */
	.video {
		height: auto;
		margin-top: 20rpx;
		color: #333333;
	}

	/* video  end */
	.vid {
		height: 400rpx;
		margin-top: -240rpx;
		width: 100%;
		border-radius: 3%;
		box-shadow: 2px 2rpx 6rpx 2rpx #FFFFFF;
	}

	.ima {
		border-radius: 5%;
	}
</style>
